<template>
  <van-tabs v-model:active="active">
    <van-tab v-for="(item, index) in title" :title="item" :key="index">
      <ListView :typeList="typeList[index]" page="category" :cid="props.cid">
        <template v-slot:son="list">
          <div class="item" v-for="item in list.son as any" :key="item.id" @click="itemClick(item.id)">
            <div class="itemLeft">
              <img :src="item.cover_url"/>
            </div>
            <div class="itemRight">
              <p class="title">{{item.title}}</p>
              <p class="des">值得购买的一本书</p>
              <p class="price">￥{{item.price}}</p>
            </div>
          </div>
        </template>
      </ListView>
    </van-tab>
  </van-tabs>
</template>

<script lang="ts" setup>
import ListView from '@/components/List/IndexView.vue'
import { ref, defineProps } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const active = ref(0)
const title = ref(['销量排序', '价格排序', '评论排序'])
const typeList = ref(['sales', 'price', 'comments_count'])
const props = defineProps(['cid'])

// 点击跳转到详情页
const itemClick = (id: number) => {
  router.push({ path: '/detail', query: { id: id, fromPath: 'category' } })
}
</script>

<style lang="scss" scoped>
.item{
  display: flex;
  background: #fafafa;
  font-size: 14px;
  padding: 10px;
  margin-top: 10px;
  .itemLeft{
    width: 100px;
    flex: 0 0 100px;
    img{
      width: 100%;
      height: 100px;
    }
  }
  .itemRight{
    flex: 1;
    margin-left: 10px;
    p{
      margin-bottom: 6px;
    }
    .price{
      color: red;
    }
  }
}
</style>
